<template>
	<view class="message">
		<view class="message_right">
			<view class="message_right_date">
				{{handleDate(data.created_at)}}
			</view>
			<view class="message_right_content">
				{{data.content}}
			</view>
		</view>

	</view>
</template>

<script setup>
	import tools from '@/util/tools';
	defineProps({
		data: Object
	})

	const handleDate = (d) => {
		return isToday(d) ? tools.formatDate(d, 'h:m') : d
	}

	const isToday = (time) => {
		const date = new Date(time)
		const today = new Date();
		return (
			date.getDate() === today.getDate() &&
			date.getMonth() === today.getMonth() &&
			date.getFullYear() === today.getFullYear()
		);
	}
</script>

<style lang="scss" scoped>
	.message {
		margin: 50rpx 20rpx;

		&_right {
			&_date {
				font-size: 24rpx;
				color: #999;
				text-align: center;
				margin: 20rpx;
			}

			&_content {
				background: var(--color);
				color: #fff;
				padding: 30rpx;
				border-radius: 10rpx 0 30rpx 30rpx;
				line-height: 50rpx;
			}
		}

	}
</style>